<template>
	<view class="content">
		<text class="success-icon yticon icon-xuanzhong2"></text>
		<image src="../../../static/tab-home.png" class="goHome" @click="goHome"></image>
		<text class="tit">支付成功</text>
		<view class="result-mid red-price">
			金额： {{ goodsPrice }}
		</view>
		<view class="btn-group">
			<view class="mix-btn hollow" v-if="isQuick == 3" @click="goShare">邀请好友帮我砍价</view>
			<navigator url="/pages/order/order?status=0" open-type="redirect" class="mix-btn">查看订单</navigator>
		</view>
		<!-- 客服弹出框 -->
		<view class="weChat_popups" v-if="watchShow == 1">
			<view class="popups_bg" @click="watchShow = 0"></view>
			<view class="popups_body">
				<view class="popups_no" @click="watchShow = 0">
					<image src="/static/icon_close.png" mode=""></image>
				</view>
				<view class="popups_content">
					<view class="popups_title">填写帮我砍价人数</view>
					<view class="popus_choice">
						可填写3人-100人帮忙砍价
					</view>
					<input class="choiceNum" v-model="choiceNum"></input>
					<view class="popups_btn" @click="setCopyWatch()">立即分享帮砍</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
	import Api from '@/common/api';
	export default {
		data() {
			return {
				status: false,
				watchShow: 0,
				// 几人砍价
				choiceNum: '',
				
				uid: 0,
				orderId: 0,
				goodsId: 0,
				goodsName:'',
				goodsPrice:'',
				goodsPic: '',
				isQuick:0
			}
		},
		onLoad(options) {
			
			// 获取这个页面要使用的数据
			this.uid = uni.getStorageSync('userInfos').id;
			this.orderId = uni.getStorageSync('orderId');
			this.goodsId = uni.getStorageSync('goodsId');
			this.goodsPrice = uni.getStorageSync('goodsPrice');
			this.goodsName = uni.getStorageSync('goodsName');
			this.goodsPic = uni.getStorageSync('goodsPic');
			this.isQuick = uni.getStorageSync('isQuick');
		},
		async onShow() {
		},
		methods: {
			goHome(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			goShare() {
				this.watchShow = 1;
			},
			async setCopyWatch() {
				if (this.choiceNum < 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入可砍价人数！'
					})
					return
				}
				if (this.choiceNum < 3) {
					uni.showToast({
						icon: 'none',
						title: '砍价人数最少3人!'
					})
					return
				}
				if (this.choiceNum > 100) {
					uni.showToast({
						icon: 'none',
						title: '砍价人数最多100人!'
					})
					return
				}
				// 生成红包
				let params = {
					memberId: this.uid,
					orderId: this.orderId,
					productId: this.goodsId,
					num: this.choiceNum
				}
				let res = await Api.apiCall('post', 'single/oms/shareRedPacket', params);
				//console.log(res)
				if (res == '操作成功') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: 'http://119.29.103.180:8080/share.html?oid=' + this.orderId + '&pid=' + this.goodsId,
						title: '砍价:' + this.goodsName + '价格：' + this.goodsPrice,
						summary: "妙街 ~ 智慧云商引领者，全新综合商业生态平台   美好生活，尽在妙街",
						imageUrl: this.goodsPic,
						success: function(res) {
							//console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							//console.log("fail:" + JSON.stringify(err));
						}
					});
					

				} else {

				}

			}
		}
	};
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.goHome{
			position: absolute;
			top: -70upx;
			left: 100upx;
			width: 50upx;
			height: 50upx;
			z-index: 1000;
		}
	}

	.success-icon {
		font-size: 160upx;
		color: #4DEAB3;
		margin-top: 100upx;
	}

	.tit {
		font-size: 38upx;
		color: #303133;
	}

	.btn-group {
		padding-top: 100upx;
	}

	.mix-btn {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 480upx;
		height: 100upx;
		font-size: $font-lg;
		color: #EC3D3D;
		border-radius: 80upx;
		border: 1px solid #EC3D3D;
		// background-color: #FA436A;
		&.hollow {
			background-color: $base-color;
			color: #fff;
		}
	}

	// 客服弹出框   
	.weChat_popups {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;

		.popups_bg {
			z-index: 1000;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #000;
			opacity: 0.3;
		}

		.popups_body {
			z-index: 1001;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 60upx;
			margin: auto;
			width: 560upx;
			height: 540upx;
			border-radius: 30upx;
			background-color: #FFFFFF;

			.popups_no {
				position: absolute;
				right: 20upx;
				top: 20upx;
				width: 32upx;
				height: 32upx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.popups_content {
				width: 100%;
				height: 100%;
				padding: 0 30upx;
				padding-top: 30upx;
				padding-bottom: 30upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.popups_title {
					margin-top: 40upx;
					font-size: 34upx;
					text-align: center;
					font-weight: 700;
				}
				.popus_choice{
					margin-top: -40upx;
					text-align: center;
					color: #FF3232; 
				}
				.choiceNum {
					width: 280upx;
					margin: 0 auto;
					height: 120upx;
					border-radius: 20upx;
					padding: 10upx;
					color: red;
					font-size: 70upx;
					background-color: #E5E5E5;
					text-align: center;
				}

				.popups_phone {
					font-size: 40upx;
					text-align: center;
					font-weight: 500;
				}

				.popups_btn {
					width: 360upx;
					height: 100upx;
					line-height: 100upx;
					background-color: #FF1D1D;
					font-size: 32upx;
					border-radius: 44upx;
					text-align: center;
					color: #FFFFFF;
					margin: 0 auto;
				}
			}
		}
	}
</style>
